<template>
  <main ref="mainRef" class=" col col-xl-8 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12 " >
    <div class="box shadow-sm border rounded bg-white mb-3 osahan-share-post">
      <form class="job-search p-3 border-bottom">
        <div class="input-group">
          <input
            type="text"
            class="form-control"
            placeholder="搜索更多活动"
            aria-label="Search"
            aria-describedby="basic-addon2"
          />
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" @click="search" type="button" >
              <i class="el-icon-search"></i>
            </button>
          </div>
        </div>
      </form>
      <!-- //nav -->
      <ul class="nav border-bottom osahan-line-tab" id="myTab" role="tablist">
        <li class="nav-item">
          <a
            class="nav-link active"
            id="contact-tab"
            data-toggle="tab"
            href="#contact"
            role="tab"
            aria-controls="contact"
            aria-selected="false"
          >同城活动</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            id="type-tab"
            data-toggle="tab"
            href="#type"
            role="tab"
            aria-controls="type"
            aria-selected="false"
          >线上活动</a
          >
        </li>
      </ul>
      <!-- 内容 -->
      <div class="tab-content" id="myTabContent" v-loading ="!mainStore.o">
        <!-- 同城活动 -->
        <div class="tab-pane active" id="contact" role="tabpanel" aria-labelledby="contact-tab" >
          <div class="p-3 w-100">
            <div class="row">
              <div class="col-md-6" v-for="(item, index) in mainList" :key="index" >
                <div class="card cardImgst">
                  <img :src="item.activity_cover" class="img-thumbnail" height="243" style="max-height: 243px" />
                  <div class="card-body">
                    <h6 class="card-title">{{ item.activity_name }}</h6>
                    <p class="card-text cc">{{ item.activit_decs }}</p>
                    <a href="#" class="font-weight-bold"
                    ><i class="el-icon-location"></i>
                      {{ item.activity_address }}</a
                    >
                    <br />
                    <span href="#"
                    ><i class="el-icon-timer"></i>
                      {{ item.activity_time }}</span
                    >
                    <br />
                    <span href="#"
                    ><i class="el-icon-position"></i>
                      {{ item.activity_type }}</span
                    >
                    <figcaption class="figure-caption text-right">
                      <button
                        type="button"
                        class="btn btn-primary"
                        @click="seeInfomation(item.id)"
                      >
                        查看详情
                      </button>
                    </figcaption>
                    <el-dialog
                      v-loading ="!seeStore.o"
                      :append-to-body="true"
                      :lock-scroll="false"
                      custom-class="dialogStyle"
                      :visible.sync="dialogVisible"
                      width="60%"
                      top="10vh"
                      :before-close="handleClose"
                    >
                      <span slot="title">
                        <span class="titleSt">活动详情</span>
                        <el-tag size="mini">{{
                          infomation.activity_type
                        }}</el-tag>
                      </span>
                      <div class="infomationSt">
                        <div class="left">
                          <img :src="infomation.activity_cover" alt="" />
                        </div>
                        <div class="right">
                          <div class="font-weight-bold h4">
                            {{ infomation.activity_name }}
                          </div>
                          <div class="text-muted">
                            活动介绍：{{ infomation.activit_decs }}
                          </div>

                          <div>
                            <span>活动时间:</span>{{ infomation.activity_time }}
                          </div>
                          <div>
                            <span>活动性质:</span
                            >{{
                              infomation.activity_character == "online"
                                ? "线上"
                                : "线下"
                            }}
                          </div>
                          <div>
                            <span>参加方式:</span
                            >{{ infomation.activity_ubtiWay }}
                          </div>
                          <div>
                            <span>活动地址:</span
                            >{{ infomation.activity_address }}
                          </div>
                          <div>
                            <span>活动评分:</span
                            >{{
                              infomation.activity_score == "0"
                                ? "暂无"
                                : infomation.activity_score
                            }}
                          </div>
                          <div>{{ infomation.activity_viewNum }}人预览</div>
                          <div></div>
                        </div>
                      </div>
                      <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false"
                        >关闭</el-button
                        >
                        <el-button type="primary" @click="dialogVisible = false"
                        >确 定</el-button
                        >
                      </span>
                    </el-dialog>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 线上 -->
        <div class="tab-pane fade" id="type" role="tabpanel" aria-labelledby="type-tab" >
          <div class="p-3 w-100">
            <div class="row">
              <div class="col-md-6" v-for="(item, index) in outList" :key="index" >
                <div class="card cardImgst">
                  <img
                    :src="item.activity_cover"
                    class="img-thumbnail"
                    height="243"
                    style="max-height: 243px"
                  />
                  <div class="card-body">
                    <h6 class="card-title">{{ item.activity_name }}</h6>

                    <p class="card-text cc">{{ item.activit_decs }}</p>

                    <a href="#" class="font-weight-bold"
                    ><i class="el-icon-location"></i>
                      {{ item.activity_address }}</a
                    >
                    <br />
                    <span href="#"
                    ><i class="el-icon-timer"></i>
                      {{ item.activity_time }}</span
                    >
                    <br />
                    <span href="#"
                    ><i class="el-icon-position"></i>
                      {{ item.activity_type }}</span
                    >
                    <figcaption class="figure-caption text-right">
                      <button
                        type="button"
                        class="btn btn-primary"
                        @click="seeInfomation(item.id)"
                      >
                        查看详情
                      </button>
                    </figcaption>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import Bus from "@/components/common/eventBus.js";

export default {
  data() {
    return {
      mainStore: this.newStore(),
      seeStore: this.newStore(),
      mainList: [],
      outList: [],
      infomation: {},
      dialogVisible: false,
    };
  },
  components: {},
  created() {
    this.getActivityList();
  },
  mounted() {
    Bus.$on("transferId", (ID) => {
      this.seeInfomation(ID);
    });
  },
  methods: {
    getActivityList() {
      this.spost(this.mainStore, "/Activity/getActivityList", {}).then(
        (res) => {
          res.d.MoodList.forEach((item) => {
            if (item.activity_character === "outline") {
              this.mainList.push(item);
            }
            if (item.activity_character === "online") {
              this.outList.push(item);
            }
          });
        },
      );
    },
    seeInfomation(id) {
      this.dialogVisible = true;
      this.spost(this.seeStore, "Activity/getInfomation", { id }).then(
        (res) => {
          this.infomation = res.d.infomation;
        },
      );
    },
    handleClose() {
      this.dialogVisible = false;
    },
    search() {
      alert("功能作者开发中，请手动查看活动...");
    },
  },
};
</script>

<style scoped lang="scss">
#myTabContent{
  min-height: 30rem;
}
.cardImgst {
  height: 100%;
}
.cardImgst > img {
  height: 50%;
}
.cc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-indent: 2em;
}

/deep/.dialogStyle {
  border-radius: 10px;
  min-height: 65%;
  max-height: 85%;
  overflow-y: scroll;
}
.titleSt {
  font-size: 20px;
  padding: 15px;
  color: rgb(29, 108, 199);
}
@media screen and (max-width: 1000px) {
  /deep/.dialogStyle {
    width: 85% !important;
  }
  .infomationSt {
    display: flex;
    flex-direction: column;
    .left {
      padding: 0 10px;
      width: 100% !important;
      img {
        width: 100%;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
          rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
      }
    }
    .right {
      padding: 0 10px;
      width: 100% !important;

      div {
        margin: 10px 0;
      }
      div > span {
        margin-right: 10px;
      }
    }
  }
}
.infomationSt {
  display: flex;
  justify-content: space-between;
  .left {
    padding: 0 10px;
    width: 50%;
    img {
      width: 100%;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    }
  }
  .right {
    padding: 0 10px;
    width: 50%;
    div {
      margin: 10px 0;
    }
    div > span {
      margin-right: 10px;
    }
  }
}
</style>
